<template>
	<view class="wrap">
		<cu-custom bgColor="bg-gradual-them" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{pageName}}</block>
		</cu-custom>

		<u-notice-bar mode="horizontal" type="primary" :list="listBar"></u-notice-bar>



		<!-- 用户上传的日常资料 -->

		<view style="margin: auto; margin-top: 40rpx; width: 85%; box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);"
			class="cu-list menu-avatar comment solids-top" v-for="(item, id) in allLifes" :key="id">
			<view class="cu-item">

				<!-- 用户头像 -->
				<image :src="item.avatar" mode="aspectFill" class="cu-avatar cat-head"></image>

				<!-- 用户姓名 -->
				<view class="content">
					<view class="text-grey">{{item.nickname}}</view>
					<view class="text-gray text-content text-df">
						{{item.catText}}
					</view>

					<!-- 图片 -->
					<view class="text-sm" style="background-color: #fcfcfc;margin-top: 10rpx;">
						<view class="flex">
							<view style="padding-left: 10rpx;"
								v-show="item.catImg1 != '' && item.catImg1 != null && item.catImg1 != undefined">
								<u-image @click="clickImgAll(0,item.catImg1,item.catImg2,item.catImg3)"
									:src="item.catImg1" :lazy-load="true" shape="square" width="160rpx" height="160rpx"
									:fade="true" duration="450" mode="aspectFill">
									<view slot="error" style="font-size: 15rpx;">加载失败</view>
								</u-image>
							</view>

							<view style="padding-left: 10rpx;"
								v-show="item.catImg2 != '' && item.catImg2 != null && item.catImg2 != undefined">
								<u-image @click="clickImgAll(1,item.catImg1,item.catImg2,item.catImg3)"
									:src="item.catImg2" :lazy-load="true" shape="square" width="160rpx" height="160rpx"
									:fade="true" duration="450" mode="aspectFill">
									<view slot="error" style="font-size: 15rpx;">加载失败</view>
								</u-image>
							</view>

							<view style="padding-left: 10rpx;"
								v-show="item.catImg3 != '' && item.catImg3 != null && item.catImg3 != undefined">
								<u-image @click="clickImgAll(2,item.catImg1,item.catImg2,item.catImg3)"
									:src="item.catImg3" :lazy-load="true" shape="square" width="160rpx" height="160rpx"
									:fade="true" duration="450" mode="aspectFill">
									<view slot="error" style="font-size: 15rpx;">加载失败</view>
								</u-image>
							</view>
						</view>
					</view>
					<view class="margin-top-sm flex justify-between">
						<view class="text-gray text-df cuIcon-time">{{' '}}{{item.createTime}}</view>
						<view>


							<!-- 0为没有点赞 -->
							<view class="demo-dislike" v-show="item.remark === 0">
								<u-icon name="heart" color="#bdbeba" size="30"></u-icon>
								{{' '}}{{item.catLikes}}
							</view>


							<!-- 1为 点赞 -->
							<view class="demo-like" v-show="item.remark === 1">
								<u-icon name="heart-fill" color="#fa3534" size="30"></u-icon>
								{{' '}}{{item.catLikes}}
							</view>

						</view>
					</view>

					<!-- 按钮 -->
					<view class="mystyle_1" style="margin-top: 10rpx;">

						<!-- 图片压缩    精选   通过-->
						<u-radio-group v-model="allLifes[id].catCheck">
							<u-radio @change="radioChange" :name="'图片压缩'" :disabled="false" :shape="'square'"
								:label-size="30" :label-disabled="false">
								图片压缩
							</u-radio>
						</u-radio-group>

						<!-- 精选 -->
						<u-radio-group v-model="allLifes[id].catChoice">
							<u-radio @change="radioChange" :name="'精选'" :disabled="false" :shape="'square'"
								:label-size="30" :label-disabled="false">
								精选
							</u-radio>
						</u-radio-group>


						<!-- 						<view class="mystyle_2">
							
							<view>
								<text>图片压缩</text>{{' '}}
								<u-switch v-model="checked" size="30"></u-switch>
							</view>
							
							<view>
								<text>图片压缩</text>{{' '}}
								<u-switch v-model="checked" size="30"></u-switch>
							</view>
						</view> -->


						<view>
							<button class="cu-btn bg-gradual-them" style="margin-right: 10rpx;"
								@click="myPass(allLifes[id].catCheck, allLifes[id].catChoice, allLifes[id].dailyId, openid)">通过审核</button>
						</view>

					</view>



				</view>





			</view>
		</view>


		<u-toast ref="uToast" />



	</view>
</template>


<script>
	import {
		getToken
	} from '@/utils/auth';
	import imgData from "@/common/uiImg.js";
	export default {
		data() {
			return {
				pageName: '管理审核',
				listBar: [
					'一旦选择图片压缩或精选，如果想取消，只有返回上一级页面才行'
				],
				list: null,
				form: {},
				show: false,


				// 选项
				dailyList: [{
					name: '精选',
					disabled: false
				}],

				imgList: [{
					name: '图片压缩',
					disabled: false
				}],

				// 内容数据
				allLifes: [],

				// allLifes: [
				// 	{
				// 		// openid:

				// 		catId: 0,    // 猫咪id

				// 		avatar: 'https://img-blog.csdnimg.cn/3d43fe923d074f42bed49242265da5be.jpg',   //分享人 头像

				// 		nickname: '热心猫友',

				// 		catText: '今日喂猫分享，大白好可爱！',  // 分享日常

				// 		catImg1: 'https://img-blog.csdnimg.cn/20210826141951774.jpg',  // 照片
				// 		catImg2: 'https://img-blog.csdnimg.cn/20210826141951774.jpg',  // 照片
				// 		catImg3: 'https://img-blog.csdnimg.cn/20210826141951774.jpg',  // 照片

				// 		createTime: '2022年11月5日',   // 日期

				// 		catLikes: 70,               // 喜欢数

				// 		remark: 0,              // 获取数据的时候需要判断

				// 		dailyId: 0,

				// 		catCheck: "",

				// 		catChoice: "",

				// 	},

				// ],

				pageNum: 0, // 页码
				pageSize: 5, // 查多少

				openid: '', // openid

				isBottom: 0,

				flag: 1, // 判断用户是否有记录


			}
		},
		onLoad(option) {
			this.getOpenid() // 获取用户openid

			this.getUserDaily(option.openid) // 通过openid 查询用户上传的 记录
		},

		methods: {


			// 通过审核
			myPass(catCheck, catChoice, dailyId, openid) {
				uni.showLoading({
					title: '加载中'
				});

				// console.log("是否压缩:",openid)    // 是否 图片压缩
				// console.log("是否精选:",catChoice)    // 是否 精选

				try {
					// 1、装填信息
					let form = {}
					form.openid = openid
					form.catCheck = catCheck
					form.catChoice = catChoice
					form.dailyId = parseInt(dailyId)


					console.log("form:", form) // 装填信息
					// 发送请求
					// this.request('passDaily', form, 'POST').then(res => {
					this.$u.api.passDaily(form).then(res => {

						passDaily
						//关闭加载画面
						uni.hideLoading();
						console.log("res:", res)
						if (res.code === 200) {
							//修改成功
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success',
								url: '/subPages/me/adminShare/adminShare' // /subPages/me/adminShare/adminShare
							})
						} else {
							//报错
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
								url: ''
							})
						}


					})
					//设置定时器 【2秒后再执行后面的，确保后端传回了 url】
					this.timer = setTimeout(() => {
						//TODO 
						console.log("刷新")
						this.getUserDaily() // 通过openid 查询用户上传的 记录

					}, 2000);

				} catch (e) {
					// 关闭加载画面
					uni.hideLoading();
					//TODO handle the exception
					console.log(e)
					this.$refs.uToast.show({
						title: e,
						type: 'error',
						url: ''
					})

				}



			},

			// 单选触发
			radioChange(e) {

				console.log(e);
			},

			// 获取用户openid
			getOpenid() {
				let openid = getToken();
				if (openid) {
					this.openid = openid
				}
			},
			// 3张点击图片放大预览
			clickImgAll(index, img1, img2, img3) {
				let imgList
				if (img2 === "") {
					imgList = [img1]
				} else if (img3 === "") {
					imgList = [img1, img2]
				} else {
					imgList = [img1, img2, img3]
				}

				wx.previewImage({
					urls: imgList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: imgList[index], // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},

			//获取 用户上传的信息 
			getUserDaily(id) {

				// this.request('getAdminDailies', {openid: getToken()}, 'GET').then(res => {
				// this.request('getAdminDailies', openid, 'POST').then(res => {
				this.$u.api.getAdminDailies({
					openid: id
				}).then(res => {

					console.log("管理员查询:", res)

					// 说明 没有日常需要审核
					if (res.data.length === 0) {
						//提示发送 没有记录！
						this.$refs.uToast.show({
							title: '没有需要审核的日常',
							type: 'warning',
							url: ''
						})
						return
					}

					// TODO 数据填充
					this.allLifes = [...res.data.map(item => {
						// id
						item.dailyId = item.id

						// 图片加工
						if (item.catImg1 != "") {
							item.catImg1 = this.myimgurl() + item.catImg1
						}
						if (item.catImg2 != "") {
							item.catImg2 = this.myimgurl() + item.catImg2
						}
						if (item.catImg3 != "") {
							item.catImg3 = this.myimgurl() + item.catImg3
						}

						// 时间加工
						item.createTime = item.createTime.split(" ")
						item.createTime = item.createTime[0]
						item.createTime = item.createTime.split("-")
						item.createTime = item.createTime[0] + "年" + item.createTime[1] + "月" + item
							.createTime[2] + "日"

						// 点赞判断
						if (item.remark == "已点赞") {
							item.remark = 1
						} else {
							item.remark = 0
						}
						return item

					})]

				})

			},

		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background: linear-gradient(-120deg, #ebfbff, #ebfbff);

	}
</style>

<style lang="scss" scoped>
	.cat-head {
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
	}

	.cat-head {
		border-radius: 50%;
		width: 70rpx;
		height: 70rpx;
	}

	.center-box {
		color: #333333;
		width: 85%;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 20rpx;
		padding: 0rpx 30rpx 0rpx;
		position: relative;
		margin-top: 50rpx;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
	}


	.bxBox {
		position: relative;
		display: flex;
		/* padding: 0 30rpx; */
		min-height: 100rpx;
		/* background-color: #ffffff; */
		/* justify-content: space-between; */
		align-items: center;
		font-size: 30rpx;
		line-height: 1.6em;
		flex: 1;

		.bxImg {
			display: inline-block;
			margin-right: 10rpx;
			width: 1.6em;
			text-align: center;
		}
	}

	.my-text {
		font-size: 20rpx;
	}

	.my-name {
		font-size: 30rpx;
	}

	.mystyle_1 {
		position: relative;
		display: flex;
		// padding: 0 30upx;
		// min-height: 100upx;
		background-color: #ffffff;
		justify-content: space-between;
		align-items: center;
	}

	.mystyle_2 {
		position: relative;
		// display: flex;
		// padding: 0 30upx;
		// min-height: 100upx;
		background-color: #ffffff;
		flex-direction: column;
		align-items: center;
	}
</style>
